<template>
    <div id="app">
        <div class="scale-box" :style="{transform: 'translate(-50%, 0) scale(' + scale + ')'}">
            <v-header />
            <router-view />
        </div>
    </div>
</template>

<script>
import Header from '@/components/header'
export default {
    data() {
        return {
            width: 1920,
            height: 1080,
            ww: 1,
            wh: 1,
            scale: 1
        }
    },
    components: {
        'v-header': Header
    },
    mounted() {
        const self = this
        self.ww = window.innerWidth / self.width
        self.wh = window.innerHeight / self.height
        self.scale = self.ww < self.wh ? self.ww : self.wh
        window.onresize = function() {
            self.ww = window.innerWidth / self.width
            self.wh = window.innerHeight / self.height
            self.scale = self.ww < self.wh ? self.ww : self.wh
        }
    },
    methods: {},
    destroyed() {}
}
</script>
<style lang="less">
@import url('./assets/css/app.less');
@import url('./assets/css/animate.less');
#app {
    width: 100vw;
    height: 100vh;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    position: relative;
    background: url('./assets/images/main-bg.jpg') repeat center;
    background-size: cover;
    overflow: hidden;
    .scale-box {
        width: 1920px;
        height: 1080px;
        transform-origin: 50% 0;
        position: absolute;
        left: 50%;
        top: 0;
        transition: 0.2s;
        z-index: 10;
    }
}
</style>
